<template lang="html">
    <div class="login">
        <div class="top-text">
            <span>TIME BLOCK</span>
        </div>
        <div class="second-text">
            <span>
                It's help record your life
            </span>
        </div>
        <div class='login-form'>
            <div class="form-item">
                <van-icon name="contact" class="account-icon" />
                <input type="text" v-model="loginForm.username" autocomplete="off" class="account-input" placeholder="请输入用户名" />
            </div>
            <div class="form-item">
                <van-icon name="bag-o" class="account-icon" />
                <input type="password" v-model="loginForm.password" autocomplete="new-password" class="account-input" placeholder="请输入密码" />
            </div>
        </div>
        <div class="botton-btn">
            <van-button size="large" type="primary" @click="toLogin">登录</van-button>
        </div>
    </div>
</template>

<script>
import { Icon } from 'vant';
import { Button } from 'vant';
export default {
    data(){
        return {
            loginForm: {}
        }
    },
    components: {
        VanIcon: Icon,
        VanButton: Button
    },
    created(){
    },
    methods: {
        toLogin(){
            if (!this.loginForm.username) {
                this.$vux.toast.show({
                    text: '请输入用户名'
                })
                return false
            }
            if (!this.loginForm.password) {
                this.$vux.toast.show({
                    text: '请输入密码'
                })
                return false
            }
            this.$vux.loading.show({
                text: '登录中...'
            })
            this.$api.post('/other/login', this.loginForm).then(res => {
                this.$vux.loading.hide()
                console.log('成功了', res.token);
                
                localStorage.setItem('token', res.token)
                this.$vux.toast.show({
                    text: '登陆成功！'
                })
                this.$router.replace({
                    name: 'index'
                })
            }).catch(e => {
                console.log('失败了');
                
                this.$vux.loading.hide()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .login{
        height: 100%;
        padding: 0 .4rem;
        .top-text{
            font-size: 33px;
            color: #fff;
            filter: blur(0);
            text-align: center;
            margin-top: .3rem;
        }
        .second-text{
            font-size: 23px;
            color: #fff;
            filter: blur(0);
            text-align: center;
            margin-top: .1rem;
        }
        .login-form{
            filter: blur(0);
            margin-top: .6rem;
            .form-item{
                margin-bottom: .4rem;
                display: flex;
                border-bottom: 1px solid #fff;
                padding-bottom: .1rem;
                .account-icon{
                    color: #fff;
                    font-size: .3rem;
                    vertical-align: middle;
                }
                .account-input{
                    margin-left: .2rem;
                    flex: 1;
                    vertical-align: middle;
                    border: none;
                    background: none;
                    color: #fff;
                    font-size: 18px;
                }
            }
        }
        &::before{    
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:50%;
            background: url('../assets/images/background.png') no-repeat;
            filter: blur(20px);
            background-size:cover;
        }
        .botton-btn{
            padding-top: .01rem;
            margin-top: .8rem;
        }
    }
</style>
